<template>
  <div id="app">
    <div v-if="pageIndex ===1" key="1">
      <div class="login-box">
        <el-form label-width="80px" :model="params">
          <el-form-item>
            <el-col :span="14">
              <el-link type="primary" :underline="false">
                账号登录
              </el-link>
              |
              <el-link type="info" :underline="false"
                       @click="myPhoneLoginPre()">
                手机号登录
              </el-link>
            </el-col>
            <el-col :span="10">
            </el-col>
          </el-form-item>
          <el-form-item label="账号:">
            <el-input v-model.number="params.userId"
                      oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input type="password" v-model="params.password"></el-input>
          </el-form-item>

          <el-form-item label="记住我:">
            <el-col :span="4">
              <el-switch v-model="params.delivery"></el-switch>
            </el-col>
            <el-col :span="20"></el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="myLogin()" style="width: 100px;">登陆</el-button>
            <el-button @click="myRegisterPre()" style="width: 100px;">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="pageIndex ===2" key="2">
      <div class="login-box">
        <el-form ref="loginDTO" label-width="80px" :model="params">
          <el-form-item label="账号:">
            <el-input v-model.number="params.userId"
                      placeholder="仅支持数字形式。"
                      oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
            <el-input v-model="params.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input type="password"
                      v-model="params.password"
                      placeholder="由英文和数字组成。"></el-input>
          </el-form-item>
          <el-form-item label="用户身份:">
            <el-col :span="8">
              <el-radio v-model="params.userType" :label=1>普通用户</el-radio>
            </el-col>
            <el-col :span="8">
              <el-radio v-model="params.userType" :label=2>企业用户</el-radio>
            </el-col>
            <el-col :span="8"></el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="myLoginPre()" style="width: 100px;">返回</el-button>
            <el-button type="success" @click="myRegister()" style="width: 100px;">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="pageIndex ===3" key="3">
      <div class="login-box">
        <el-form label-width="80px" :model="params">
          <el-form-item>
            <el-col :span="14">
              <el-link type="info" :underline="false"
                       @click="myLoginPre()">
                账号登录
              </el-link>
              |
              <el-link type="primary" :underline="false">
                手机号登录
              </el-link>
            </el-col>
            <el-col :span="10">
            </el-col>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="params.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码:">
            <el-col :span="18">
              <el-input v-model.number="params.code"
                        oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="text" style="color: darkgray" @click="myPhoneCode()">获取验证码</el-button>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="myPhoneLogin()" style="width: 100px;">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {postLogin, postRegister, getPhoneCode, postPhoneCode} from "@/api";
import jwtUtil from "jwt-decode";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data() {
    return {
      pageIndex: 1,
      params: {
        userId: '',
        password: '',
        isRememberMe: '',
        delivery: false,
        userType: '',
        userName: '',
        phone: '',
        code: ''
      },

    }
  },
  methods: {
    myLoginPre() {
      this.params = {}
      this.$set(this.params, 'userId', '')
      this.$set(this.params, 'password', '')
      this.$set(this.params, 'isRememberMe', '')
      this.$set(this.params, 'delivery', false)
      this.changePageIndex(1)
    },
    myLogin() {
      if (this.params.userId === '' || this.params.userId === null || this.params.userId === undefined) {
        this.$message({
          message: '请输入账号',
          type: 'warning'
        })
        throw "error -> 请输入账号"
      }

      if (this.params.password === '' || this.params.password === null || this.params.password === undefined) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
        throw "error -> 请输入密码"
      }

      if (this.params.delivery === false) {
        this.params.isRememberMe = 0
      } else {
        this.params.isRememberMe = 1
      }
      postLogin(this.params).then(res => {
        this.saveToken(res)
      })

    },
    myRegisterPre() {
      this.params = {}
      this.$set(this.params, 'userId', '')
      this.$set(this.params, 'password', '')
      this.$set(this.params, 'userName', '')
      this.$set(this.params, 'userType', 1)
      this.changePageIndex(2)
    },
    myRegister() {
      let userIdMatch = /^\d{1,10}$/;
      let passwordMatch = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (this.params.userId === '' || this.params.userId === null || this.params.userId === undefined) {
        this.$message({
          message: '请输入账号',
          type: 'warning'
        })
        throw ("error ->请输入账号")
      }
      if (this.params.userName === '' || this.params.userName === null || this.params.userName === undefined) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        })
        throw "error -> 请输入用户名"
      }
      if (this.params.password === '' || this.params.password === null || this.params.password === undefined) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
        throw "error -> 请输入密码"
      }
      if (!userIdMatch.test(this.params.userId)) {
        this.$message({
          message: '账号需10位以内',
          type: 'warning'
        })
        throw "error -> 账号需10位以内"
      }
      if (!passwordMatch.test(this.params.password)) {
        this.$message({
          message: '密码格式错误',
          type: 'warning'
        })
        throw "error -> 密码格式错误"
      }
      postRegister(this.params).then(() => {
        this.$message.success('注册成功')
        this.changePageIndex(1)
      })
    },
    myPhoneLoginPre() {
      this.params = {}
      this.$set(this.params, 'phone', '')
      this.$set(this.params, 'code', '')
      this.changePageIndex(3)
    },
    myPhoneCode() {
      let phoneMatch = /^1[34578]\d{9}$/;
      if (this.params.phone === '' || this.params.phone === null || this.params.phone === undefined) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        throw "error -> 请输入手机号"
      }
      if (!phoneMatch.test(this.params.phone)) {
        this.$message({
          message: '手机号格式错误',
          type: 'warning'
        })
        throw "error -> 手机号格式错误"
      }
      getPhoneCode(this.params)

      this.$message.success("请求成功，请勿频繁操作！！！")
    },
    myPhoneLogin() {
      let phoneMatch = /^1[34578]\d{9}$/;
      if (this.params.phone === '' || this.params.phone === null || this.params.phone === undefined) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        throw "error -> 请输入手机号"
      }
      if (!phoneMatch.test(this.params.phone)) {
        this.$message({
          message: '手机号格式错误',
          type: 'warning'
        })
        throw "error -> 手机号格式错误"
      }
      if (this.params.code === '' || this.params.code === null || this.params.code === undefined) {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        throw "error -> 请输入验证码"
      }
      postPhoneCode(this.params).then(res => {
        this.saveToken(res)
      })
    },
    saveToken(res) {
      let expire = new Date().getTime()
      //保存7天或者1天
      let time = this.params.isRememberMe === 1 ? expire + 24 * 60 * 60 * 1000 * 7 : expire + 24 * 60 * 60 * 1000
      let obj = {
        data: res.data.token,
        time: new Date().getTime(),
        expire: time
      }
      this.$message.success('登陆成功！')
      window.localStorage.setItem('Token', JSON.stringify(obj))
      let user = jwtUtil(window.localStorage.getItem('Token'))
      //判断用户身份
      if (user.userType === 0) {
        this.$router.replace('/admin')
      } else if (user.userType === 1) {
        this.$router.replace('/seeker')
      } else {
        this.$router.replace('/company')
      }
    },
    changePageIndex(pageIndex) {
      this.pageIndex = pageIndex;
    },
  },
  created() {
    this.myLoginPre()
  },
  mounted() {
    window.app = this;
  },
}
;
</script>

<style>

.login-box {
  position: absolute;
  top: 200px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  padding: 10px;
  margin: auto;
}


</style>
